<template>
  <div>
    <!--     搜索条件-->
    <SearchForm @search="getTableData" @reset="resetSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[1425]">
        <el-form-item :label="$t('所属租户')" prop="adminUserId">
          <el-select v-model="page.adminUserId" style="width: 100%" @change="tenantChange" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1426]">
        <el-form-item :label="$t('APP名称')" >
          <el-select style="width: 100%" v-model="page.productNameList" multiple clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户类型')" prop="isRepeatedBorrowing">
          <el-select style="width: 100%" v-model="page.isRepeatedBorrowing" clearable>
            <el-option v-for="item in userType" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('应还日期')" prop="timeValue">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="~"
              unlink-panels
              :clearable="false"
              :picker-options="pickerOptions"
              :start-placeholder="$t('开始日期')"
              :end-placeholder="$t('结束日期')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card shadow="never" style="margin-top: 10px">
      <el-tabs v-model="activeName" @tab-click="getTableData">
        <el-tab-pane :label="$t('逾期率')" name="1">
          <Table :loading="loading" max-height="500" :page="false" :table-column="breakTableColumn"
                 :table-data="tableData"
          />
        </el-tab-pane>
        <el-tab-pane :label="$t('回款率')" name="2">
          <Table :loading="loading" max-height="500" :page="false" :table-column="collectionTableColumn"
                 :table-data="tableData"
          />
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>

<script>
import {selectProduct, selectTenant} from "@/api/system";
import {export_json_to_excel} from "@/utils/exportExcel";
import {defaultTimeDate, dateFormatSection, deepClone} from "@/utils/tools";
import {refundReportExport, fetchAmountRefundReport} from '@/api/finance'

export default {
  name: 'financeAmountRepayment',
  data() {
    return {
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 1,
        timeValue: defaultTimeDate(7),
        productName:[]
      },
      activeName: '1',
      tenantList: [],
      productList: [],
      tableData: [],
      // 催回率表头
      collectionTableColumn: [
        {label: this.$t('应还时间'), prop: 'refundDate', width: 100, fixed: 'left'},
        {label: this.$t('应还总金额'), prop: 'totalShouldNum', minWidth: 100},
        {label: this.$t('还款应还金额'), prop: 'shouldNum', minWidth: 120},
        {label: this.$t('还款实还金额'), prop: 'actualNum', minWidth: 120},
        {label: this.$t('应还展期金额'), prop: 'rollNum', minWidth: 100},
        {label: 'S3', prop: 't3',},
        {label: 'S2', prop: 't2',},
        {label: 'S1', prop: 't1',},
        {label: this.$t('展期率'), prop: 'rollRate', minWidth: 100},
        {label: this.$t('展期+结清回款率'), prop: 'rollSettleOverdueRate', minWidth: 120},
        {label: 'D0', prop: 'd0',},
        {label: 'D1', prop: 'd1',},
        {label: 'D2', prop: 'd2',},
        {label: 'D3', prop: 'd3',},
        {label: 'D4', prop: 'd4',},
        {label: 'D5', prop: 'd5',},
        {label: 'D6', prop: 'd6',},
        {label: 'D7', prop: 'd7',},
        {label: 'D15', prop: 'd15',},
        {label: 'D30', prop: 'd30',},
        {label: this.$t('当前逾期率'), prop: 'collectionRate', minWidth: 100,fixed: 'right',},
      ],
      // 坏帐率表头
      breakTableColumn: [
        {label: this.$t('应还时间'), prop: 'refundDate', width: 100, fixed: 'left'},
        {label: this.$t('应还总金额'), prop: 'totalShouldNum', minWidth: 100},
        {label: this.$t('还款应还金额'), prop: 'shouldNum', minWidth: 120},
        {label: this.$t('还款实还金额'), prop: 'actualNum', minWidth: 120},
        {label: this.$t('应还展期金额'), prop: 'rollNum', minWidth: 100},
        {label: 'S3', prop: 't3',},
        {label: 'S2', prop: 't2',},
        {label: 'S1', prop: 't1',},
        {label: this.$t('展期率'), prop: 'rollRate', minWidth: 100},
        {label: this.$t('展期+结清首逾率'), prop: 'rollSettleOverdueRate', minWidth: 120},
        {label: 'D0', prop: 'd0',},
        {label: 'D1', prop: 'd1',},
        {label: 'D2', prop: 'd2',},
        {label: 'D3', prop: 'd3',},
        {label: 'D4', prop: 'd4',},
        {label: 'D5', prop: 'd5',},
        {label: 'D6', prop: 'd6',},
        {label: 'D7', prop: 'd7',},
        {label: 'D15', prop: 'd15',},
        {label: 'D30', prop: 'd30',},
        {label: this.$t('催回率'), prop: 'overdueRefundRate', fixed: 'right', minWidth: 100},
        {label: this.$t('入催催回率'), prop: 'collectionRate', minWidth: 100, fixed: 'right',},
      ],
      loading: false,
      exportsLoading: false,
      userType: [
        {label: this.$t('新客'), value: 0},
        {label: this.$t('老客'), value: 1},
      ],
      selectDate: null,
      pickerOptions: {
        onPick: ({maxDate, minDate}) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = null
          }
        },
        disabledDate: (time) => {
          // 最大可以选择前后31天时间
          if (this.selectDate !== null) {
            const dayNum = 30 * (24 * 60 * 60 * 1000)
            const minTime = this.selectDate - dayNum
            const maxTime = this.selectDate + dayNum
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
  mounted() {
    this.getTableData()
    selectTenant().then(res => {
      this.tenantList = res.data
    })
    selectProduct().then(res => {
      this.productList = res.data
    })
  },
  methods: {
    async getTableData() {
      this.loading = true
      const [startTime, endTime] = dateFormatSection(this.page.timeValue)
      const params = {
        ...this.page,
        startTime,
        endTime,
        type: parseInt(this.activeName)
      }
      delete params.timeValue
      const res = await fetchAmountRefundReport(params)
      if (res.code === 1) {
        const data = res.data
        if (data) {
          let total = deepClone(data)
          const tableData = data.refundReportAmountVos
          total = {
            ...total,
            refundDate:this.$t('总计')
          }
          delete total.refundReportVos
          this.tableData = [total,...tableData]
        } else {
          this.tableData = []
        }
        this.loading = false
      } else {
        this.loading = false
      }
    },
    async tenantChange(value) {
      const res = await selectProduct({adminUserId: value})
      if (res.code === 1) {
        this.$set(this.page, 'productName', null)
        this.productList = res.data
      }
    },
    resetSearch() {
      this.page = {
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
      this.getTableData()
    },

  }
}
</script>

<style scoped>

</style>
